<script setup>
import { ref } from 'vue'
import { useCartStore } from '@/store'
import { onShow } from '@dcloudio/uni-app'
import { route } from 'uview-plus'


const cartStore = useCartStore()


onShow(() => {
  cartStore.getCartList()
  cartStore.getCount()
  cartStore.selectAll = true

})

// 去到结算页面
const checkout = () => {
  console.log(cartStore.cartList);
  const ids = cartStore.cartList.filter(item => item.checked).map(item => item.id)
  route({
    url: '/pages/order/submitOrder',
    type: 'to',
    params: {
      ids: ids.join(',')
    }
  })
}


// 删除
const deleteItem = (id, index) => {
  cartStore.deleteItem(id, index)
}
// 调用 pinia 中的方法
const numberChange = (e, index) => {
  cartStore.numberChange(e.value, index)
}

// 
const swipeOptions = ref([{
  style: {
    backgroundColor: '#e4393c',
    backgroundImage: "url('/static/images/delete.png')",
    backgroundSize: '30rpx 30rpx', // 或者使用 'contain'
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '40rpx',
    border: "none",
    margin: '1rpx'
  }
}])
</script>


<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="nav">
      <up-navbar leftIcon="" :placeholder="true" border title="购物车" rightIcon="more-dot-fill">
      </up-navbar>
    </view>
    <!-- 内容 -->
    <view class="container" v-if="cartStore.cartList && cartStore.cartList.length > 0">
      <scroll-view scroll-y="true" class="scroll-Y">
        <up-swipe-action :autoClose="true">
          <up-swipe-action-item :duration="100" @click="deleteItem(item.id, index)" :options="swipeOptions" class="item"
            v-for="(item, index) in cartStore.cartList" :key="index">
            <view class="content">
              <up-checkbox-group shape="circle" activeColor="#52ABAD" style="margin-right: 20rpx;">
                <up-checkbox v-model:checked="item.checked" @change="cartStore.checkBoxChange(item.id)"></up-checkbox>
              </up-checkbox-group>

              <up-image class="image" width="200rpx" height="200rpx" :src="item.goodsImage" mode="aspectFit"></up-image>

              <view class="info">
                <view class="top">
                  <up-text :lines="1" size="20rpx" color="#333333" :text="item.goodsName"></up-text>
                </view>
                <view class="bottom">
                  <up-text class="price" mode="price" :text="item.sellingPrice"></up-text>
                  <up-number-box :asyncChange="true" :max="5" v-model="item.goodsCount"
                    @change="e => numberChange(e, index)"></up-number-box>
                </view>
              </view>
            </view>
          </up-swipe-action-item>
        </up-swipe-action>
      </scroll-view>
      <view class="footer">
        <up-checkbox-group shape="circle" activeColor="#52ABAD" class="select-all">
          <up-checkbox v-model:checked="cartStore.selectAll" @change="cartStore.selectAllChange"
            label="全选"></up-checkbox>
        </up-checkbox-group>
        <up-text class="total" color="red" size="18" mode="price" :text="cartStore.totalPrice"></up-text>
        <up-button class="but" shape="circle" color="#52ABAD" type="primary" @click="checkout">结算</up-button>
      </view>
    </view>
    <view v-else>
      <up-empty mode="car" icon="/static/images/car.png">
        <up-button color="#52ABAD" size="large " style="width: 400rpx; margin-top: 200rpx;"
          @click="route({ url: '/pages/home/index', type: 'tab' })" text="去购物"></up-button>
      </up-empty>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding-top: 10rpx;

  .scroll-Y {
    height: calc(100vh - 280rpx);
  }

  .item {
    border-bottom: 1px solid #ccc;

    // 获取最后一个
    &:last-child {
      border-bottom: 0;
    }

    .content {
      display: flex;
      align-items: center;
      padding: 20rpx 20rpx;

      .image {
        margin-right: 20rpx;
      }

      .info {
        height: 140rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-size: 24rpx;
          color: #e4393c;
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color: #ffffff;
    padding: 0 20rpx;
    border-top: 1px solid #F7F7F8;



    .total {
      flex: 2;
      font-size: 28rpx;
      color: #333333;
    }

    .select-all {
      flex: 1;
    }

    .but {
      flex: 1;
    }


  }
}
</style>